<template>
    <section>
        <!--搜索工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filters" ref="searchForm" :rules="searchRules" label-width="80px">
                <el-form-item prop="year">
                    <el-select
                            placeholder="年份" v-model="filters.year" size="18px">
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in options.years"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="check_unit_name">
                    <el-input
                            placeholder="院校名称"
                            v-model.trim="filters.check_unit">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-col>


        <!--搜索结果表格-->
        <el-table
                :header-row-style="headerRowStyle"
                :data="tableData"
                stripe
                v-loading="listLoading"
                style="width: 100%;">
            <el-table-column
                    label="序号"
                    type="index"
                    width="60"
                    align="center">
            </el-table-column>
            <el-table-column
                    align="right"  width="80" >
               <template slot-scope="scope">
                    <img v-if="scope.row.check_unit_logo" style="float:right; width:50px; height:50px;" :src="scope.row.check_unit_logo.path" class="avatar">
                </template>
            </el-table-column>
            <el-table-column
                    align="left"
                    style="float:left"
                    label="高校名称"
                    prop="college_name">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="年份"
                    prop="year">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="发现总隐患数"
                    prop="total_bugs">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="已整改数"
                    prop="total_fix_bugs">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="整改完成率"
                    :formatter="fixFormatter"
                    prop="total_fix_bugs">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="提交日期"
                    prop="gmt_created">
            </el-table-column>
            <el-table-column
                    align="center" label="操作" prop="id" >
                <template slot-scope="scope">
                    <el-button
                        @click="dowReportWord(scope.row)"
                            type="primary"  >
                        下载报告
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    style="text-align: center;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="pager.page_size"
                    :page-sizes="pager.sizes"
                    background
                    :current-page="pager.page_current"
                    layout="prev,pager,next,sizes,total"
                    :total="pager.total">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
    import { selfCheckReport } from '../../api/report_api'
    import dict from '../../common/js/dict';
    import {getFile,fileUrl} from "../../api/common";
    import { saveAs } from 'file-saver';
    export default {
        name:'eduReprot',
        data() {
            return {
                //表单header样式
                headerRowStyle: {
                    backgroundColor: "#ddd",
                    color: "#333",
                    textAlign: "center"
                },
                listLoading: false,
                //表格数据
                tableData: [],
                currentYear:'2018',
                dict:dict,
                filters: {
                    year: '',
                    check_unit: '',
                },
                //分页设置
                pager: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_current: 1
                },
                searchRules:{
                    year:{required:true,message:'请选择年份',trigger:'change'}
                },
                options: {
                    years: []
                }
            }
        },
        methods: {
            formatFileType(val) {
                return this.options.file_type[val.file_type];
            },
            //分页page_size发生改变
            handleSizeChange(val) {
                this.pager.page_current = 1;
                this.pager.page_size = val;
                this.getReportList();
            },
            //分页page_current发生改变
            handleCurrentChange(val) {
                this.pager.page_current = val;
                this.getReportList();
            },
            search(){
                this.pager.page_current = 1;
                this.getReportList();
            },
            dowReportWord(row){
                this.listLoading = true
                getFile({id:row.file_id}).then(res => {
                    this.listLoading = false
                    if(res.status == 200){
                        if(res.data.status == 200){
                            saveAs(res.data.datas,row.college_name)
                        }
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                })
            },
            getReportList(){
                this.$refs['searchForm'].validate((valid) => {
                    if (valid) {
                        this.listLoading = true;  //显示loading
                        let condition = this.filters;
                        condition.year = condition.year.toString()
                        let params = {
                            page_size: this.pager.page_size,
                            page_current: this.pager.page_current,
                            condition: condition
                        };
                        selfCheckReport(params).then((res) => {
                            if (res.data.status == 200) {
                                this.listLoading = false;  //隐藏loading
                                let result = JSON.parse(res.data.datas);
                                this.tableData = result.items;
                                this.pager.total = result.total;
                            } else {
                                if (res.data.status == 401) {
                                    this.$router.push('/login');
                                }
                                this.$message.error(res.data.status + " " + res.data.msg);
                            }
                        });
                    }
                    })
            },
            reset(){
                this.$refs['searchForm'].resetFields();
                this.filters.check_unit='';
                this.filters.year=this.currentYear;
                this.pager.page_current = 1;
                this.getReportList();
                },
            initYears() {
                this.currentYear = (new Date()).getFullYear();
                this.filters.year = this.currentYear;
                for (let i = this.currentYear; i >= 2018; i--) {
                    this.options.years.push(i);
                }
            },
            //初始化页面
            initData() {
                this.initYears();
                this.getReportList();
            },
            fixFormatter(row) {
                return  (row.total_fix_bugs /row.total_bugs * 100).toFixed(1) + '%'
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>

<style scoped>

</style>
